<template>
	<view id="user-real">
		<header-back :headerTitle="$lang('real.verified')"></header-back>
		<view class="content-form">
			<view class="h3">{{ $lang('real.idCard') }}</view>
			<view class="apply-row">
				<view class="h6">{{ $lang('real.country') }}</view>
				<view class="apply-in">
					<view class="apply-item" @click="$refs.countryPopup.open()">
						<view class="h1">{{formObj.nationality}}</view>
						<image src="/static/icon/right_arrow_icon_01.png" class="arrow-r" mode=""></image>
					</view>
				</view>
			</view>
			<view class="apply-row">
				<view class="h6">{{ $lang('real.actualName') }}</view>
				<view class="apply-in">
					<input type="text" v-model="formObj.real_name" :placeholder="$lang('real.iactualName')" placeholder-style="color:#CBCBCB;" />
				</view>
			</view>
			<view class="apply-row">
				<view class="h6">{{ $lang('real.idCard') }}</view>
				<view class="apply-in">
					<input type="text" v-model="formObj.id_num" :placeholder="$lang('real.iidCard')" placeholder-style="color:#CBCBCB;" />
				</view>
			</view>
		</view>
		<view class="content-form">
			<view class="h3">
				<view class="h4">{{ $lang('real.uploadDocuments') }}</view>
				<!-- <view class="h6">≤5张</view> -->
			</view>
			<view class="real-row">
				<view class="real-item" @click="chooseImgs(1)">
					<image src="/static/icon/id_card_zhengmian.png"  v-show="!formObj.img_front" class="real-icon" mode=""></image>
					<image :src="formObj.img_front"  v-show="formObj.img_front" class="real-icon" mode="aspectFit"></image>
					<view class="r-name">{{$lang('real.positive')}}</view>
				</view>
				<view class="real-item" @click="chooseImgs(2)">
					<image src="/static/icon/id_card_fanmian.png"  v-show="!formObj.img_reverse" class="real-icon" mode=""></image>
					<image :src="formObj.img_reverse"  v-show="formObj.img_reverse" class="real-icon" mode="aspectFit"></image>
					<view class="r-name">{{$lang('real.obverse')}}</view>
				</view>
				<!-- <view class="real-item " v-for="(img,i) in imgAry" :key="i">
					<image :src="img" @click.stop="chooseImgs(i+1)" class="item-img" mode=""></image>
					<image @click.stop="delImgFn(i)" src="/static/icon/icon_delect_02.png" class="del-icon" mode=""></image>
				</view>
				<view class="real-item add-item" v-show="imgAry.length < 5" @click="chooseImgs()">
					<image src="/static/icon/add_icon_img.png" class="add-icon" mode=""></image>
					<view class="h6">上传证件</view>
				</view> -->
			</view>
		</view>
		
		<view class="content-footer">
			<view class="footer-btn" @click="submitReal()">{{ $lang('real.confirmSubmission') }}</view>
		</view>
		
		<loading-cover ref="loadingCover"></loading-cover>
		
		<uni-popup ref="countryPopup" type="right" :mask-click="true">
			<view class="country-popup">
				<view class="shops-header-box">
					<view class="shops-header">
						<view class="shops-left" @click.stop="$refs.countryPopup.close()">
							<image  src="/static/icon/arrow_left_01.png" class="arrow-l" mode=""></image>
							<view class="shops-header-title">{{ $lang('real.chooseNationality') }}</view>
						</view>
						<view class="shops-right" @click="toBack('/pages/index/index/index')">
							<image src="/static/icon/home_icon_02.png" class="home-icon" mode=""></image>
							<view class="to-home">{{ $lang('real.backToTheHomepage') }}</view>
						</view>				
					</view>
					<view class="search-wrap uni-flex uni-row">
						<view class="flex-item input-wrap">
							<input class="uni-input" maxlength="50" v-model="keyword" confirm-type="search" @confirm="searchFn()" :placeholder="$lang('real.pleaseEnterCountryName')" />
							<text class="iconfont iconsousuo1" @click.stop="searchFn()"></text>
						</view>
					</view>
				</view>
				<view class="country-ul">
					<view class="country-li" v-for="(obj,l) in countryArr" :key="l" @click.stop="selectFn(obj,l)">
						<view class="li-name">
							<text>{{obj.name}}</text>
							<image v-show="selectIndex == obj.name" src="/static/icon/icon_select_01.png" class="sel-icon" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import headerBack from '@/components/headerBack.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import config from '@/common/js/config.js'
export default {
	data() {
		return {
			formObj: {
				real_name: '',
				id_num: '',
				img_front: '',
				img_reverse: '',
				nationality: '中国', // 国籍
			},
			countryArr: [],
			copyCountry: [],
			selectIndex: '中国',
			selectObj: {
				name: '',
			},
			imgAry: [],
			keyword: '',
		};
	},
	onLoad() {
		this.getCountry();
	},
	components: {
		headerBack,
		uniPopup
	},
	onShow() {

	},
	methods: {
		searchFn(){
			let keyword = this.keyword.trim();
			if(!keyword){
				this.countryArr = this.copyCountry;
			}
			this.countryArr = this.copyCountry.filter(v=>{
				if(v.name.includes(keyword) ){
					return v;
				} 
			})
		},
		// 删除图片
		delImgFn(index){
			this.imgAry.splice(index,1)
		},
		// 获取区号
		getCountry(){
			this.$api.sendRequest({
				url: '/api/register/countrylist',
				method: 'get',
				success:res=>{
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					if(res.code == 0){
						this.copyCountry = this.countryArr = res.data;
						// this.selectObj = this.countryArr[this.selectIndex];
						// this.formObj.nationality = this.selectObj.name;
					}
				}
			})
		},
		// 选择国籍
		selectFn(obj,index){
			this.selectIndex = obj.name;
			this.selectObj = obj;
			this.formObj.nationality = obj.name;
			this.$refs.countryPopup.close();
		},
		// 上传图片
		chooseImgs(type){
			var that = this;
			uni.chooseImage({
				count:1,
				success: (filePaths) => {
					var imageSrc = filePaths.tempFilePaths[0];
					uni.showLoading({
						title: 'Loading...',
						mask: true,
					})
					uni.uploadFile({
						url: config.baseUrl+'/api/upload/image',
						filePath: imageSrc,
						name: '',
						formData: null,
						success: res=>{
							uni.hideLoading()
							res.data  = JSON.parse(res.data)
							let img = res.data.data.pic_path;
							if(type == 1){
								that.formObj.img_front = img;
							}else if(type == 2) {
								that.formObj.img_reverse = img;
							}
							that.$forceUpdate()
						}
					})
					
				},
				fail:err=>{
					
				}
			});
		},
		// 检验
		handleCheck(){
			var residCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;//身份证
			if(!this.formObj.real_name){
				return this.$util.showToast({title: this.$lang('real.pleaseEnterYourRealName')})
			}
			if(!this.formObj.id_num){
				return this.$util.showToast({title: this.$lang('real.pleaseEnterTheIDNumber')})
			}
			// if(!residCard.test(this.formObj.id_num)){
			// 	return this.$api.msg('请输入正确的身份证号')
			// }
			if(!this.formObj.img_front || !this.formObj.img_reverse){
				return this.$util.showToast({title: this.$lang('real.pleaseUploadIDPhoto')})
			}
			return true;
		},
		// 提交
		submitReal(){
			if(this.handleCheck() !== true){
				return false;
			}
			this.formObj.images = this.imgAry.join(',')
			uni.showLoading({
				title: 'Loading...',
				mask: true,
			})
			this.$api.sendRequest({
				url: '/api/member/certification',
				data: this.formObj,
				method: 'post',
				success: res=>{
					uni.hideLoading()
					if(res.code == 0){
						this.$util.showToast({title: this.$lang('real.submittedSuccessfully')})
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							})
						},1500)
					}else {
						this.$util.showToast({title: res.message})
					}
				}
			})
		},
	}
};
</script>

<style>
	page {
		background: #F9F9F9;
	}
</style>

<style scoped lang="scss">
	#user-real {
		padding-bottom: 100rpx;
	}
	.content-form {
		width: 100%;
		padding: 36rpx 32rpx;
		box-sizing: border-box;
		background: #fff;
		margin-bottom: 20rpx;
		.h3 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
			color: #292929;
			font-weight: 500;
			.h6 {
				font-size: 24rpx;
				color: #92969E;
				font-weight: normal;
			}
		}
		.apply-row {
			padding-top: 36rpx;
			.h6 {
				font-size: 24rpx;
				color: #92969E;
				line-height: 34rpx;
				margin-bottom: 22rpx;
			}
			.apply-in {
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #EFEFEF;
				input {
					font-size: 30rpx;
					color: #1D1E22;
				}
				.apply-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.h1 {
						font-size: 32rpx;
						font-weight: 600;
						color: #292929;
					}
				}
			}
			
		}
		
		.real-row {
			display: flex;
			align-items: center;
			// flex-wrap: wrap;
			justify-content: space-between;
			padding-top: 36rpx;
			.real-item {
				width: 328rpx;
				margin-bottom: 24rpx;
				text-align: center;
				.real-icon {
					width: 328rpx;
					height: 210rpx;
				}
				.r-name {
					font-size: 26rpx;
					color: #92969E;
				}
			}
			
		}
		
	}
	
	.content-footer {
		width: 100%;
		padding: 96rpx 54rpx 0px;
		box-sizing: border-box;
		.footer-btn {
			width: 100%;
			height: 76rpx;
			background: #31bb6d;
			border-radius: 14rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			color: #fff;
		}
	}
	
	.country-popup {
		width: 100%;
		background: #F8F7FC;
		// height: 100vh;
		
		.shops-header-box {
			width: 100%;
			// height: 88rpx;
			background: #fff;
			padding: 0px 32rpx;
			box-sizing: border-box;
			margin-bottom: 8rpx;
			.shops-header {
				width: 100%;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.shops-left {
					display: flex;
					align-items: center;
					.shops-header-title {
						font-size: 36rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #292929;
						line-height: 50rpx;
						margin-left: 6rpx;
					}
				}
				.shops-right {
					display: flex;
					align-items: center;
					.home-icon {
						width: 32rpx;
						height: 32rpx;
						margin-right: 12rpx;
					}
					.to-home {
						font-size: 26rpx;
						color: #31bb6d;
					}
				}
			}	
			
			.search-wrap {
				flex: 0.5;
				padding: 30rpx 30rpx ;
				font-size: $font-size-tag;
				display: flex;
				align-items: center;
				.input-wrap {
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background: $color-bg;
					height: 70rpx;
					padding-left: 10rpx;
					border-radius: 70rpx;
					input {
						width: 90%;
						background: $color-bg;
						font-size: $font-size-tag;
						height: 50rpx;
						padding: 10rpx 25rpx 10rpx 40rpx;
						line-height: 50rpx;
						border-radius: 40rpx;
					}
					text {
						font-size: $font-size-toolbar;
						color: $color-tip;
						width: 80rpx;
						text-align: center;
						margin-right: 20rpx;
					}
				}
				
			}
		}
		.country-ul {
			height: 100vh;
			overflow: auto;
			.country-li {
				width: 100%;
				background: #fff;
				padding: 0px 32rpx;
				box-sizing: border-box;
				.li-name {
					width: 100%;
					height: 110rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2rpx solid #E8EDF5;
					text {
						font-size: 32rpx;
						color: #353535;
					}
					.sel-icon {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
		}
	}
	
</style>
